<template>
  <div class="grandTotal">
    <a-row :gutter="30">
      <a-col :span="8" v-for="(item,index) of grandTotalNum" :key="index" >
        <div class="fors" @click="grandTotalBtn(item)">
          <div class="title_li">
            <div class="title_text">{{ item.title }}</div>
            <div class="title_num">{{ item.number }}</div>
          </div>
          <div>
            <a-progress

              type="circle"
              :width="95"
              :strokeWidth="15"
              :stroke-color="item.color"
              :percent="item.percent"
            />
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "grandTotal",
  props:['grandTotalNum'],
  data(){
    return {

    }
  },
  methods:{
    grandTotalBtn(val){
      alert('嗨嗨嗨'+val.title)
    }
  }
}
</script>

<style scoped>
.grandTotal{
  /*display: flex;*/
  box-sizing: border-box;
  padding: 25px 25px 0 25px;
}
.fors{
  display: flex;
  padding: 15px 40px ;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #E9E9E9;
  margin-bottom: 25px;
  cursor: pointer;
}
.title_li{
  margin-left: 20px;
}
.title_text{
  font-size: 20px;
  font-weight: 700;
}
.title_num{
  font-size: 30px;
  font-weight: 500;
}
</style>